<template>
  <v-container>
    <v-layout wrap>
      <v-flex xs12 sm12 md12 lg12>
        <v-layout align-center>
          <v-flex lg1 md1 class="hidden-md-and-down">
            <img src="@/assets/images/index/ico-1.png" class="d-inline">
          </v-flex>
          <v-flex class="text-lg-left">
            <h3 class=" font-weight-black primary--text d-inline" ><span class="font-weight-black headline">大美太行</span>戏剧曲艺荟萃</h3>
          </v-flex>
          <v-spacer></v-spacer>
          <v-flex class="text-lg-right">
            <router-link to="/more/4000" style="">
              <img src="@/assets/images/index/ico-2.png">
              <img src="@/assets/images/index/ico-3.png">
            </router-link>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex xs6 sm3 md3 lg3 v-for="(item,index) in data" :key="index">
        <v-card hover :to="'/detail/' + item.id" class="ma-2" height="260px" >
          <v-card-media :src="MImage(item.image)" height="200px"></v-card-media>
          <v-card-title>{{item.title}}</v-card-title>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  name: '',
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data () {
    return {}
  },
  created: function () {
  }
}
</script>
